Sistem koji se prilagođava posmatračima, a ne obrnuto.
Temelj za Vigilo Mobile i Vigilo Web Admin. Boje, tipografija, komponente i obrasci koji zamenjuju nataloženi AdminKit/Bootstrap front. Cilj: jedna ozbiljna, mirna, funkcionalna platforma — bez Excel-a sa strane, bez 30 checkbox-ova, bez 21-kolone sa kraticama.
Principi
Šest pravila koja proveravaju svaki novi ekran. Ako se ne uklapa — vraćamo se na ova pravila pre nego što dodamo još jedno polje, dugme ili tab.
Jedan ekran — jedna stvar
Nije forma + filteri + 5 akcija + dashboard. Razdvojeno. Lakše je razumeti, lakše je naučiti, lakše je promeniti.
Sistem klasifikuje, čovek se javlja
Posmatrač ne odlučuje da li je incident lakši ili teži. Sistem klasifikuje, sistem zove PCC, posmatrač samo opisuje šta vidi.
Notifikacije su targetirane
Po BM zaduženju, po regionu, po roli. Nikada globalno. „Hiljadu komada u sekundi“ je bag, ne feature.
Validacija je meka
Upozorenja sa eskalacijom, nikada blokirajuće. Tamarin princip: „ne možemo da znamo“ — pusti unos, ali traži potvrdu.
Excel je bag
Ako bilo ko izvozi u Excel da bi obavio zadatak, sistem nije gotov. Funkcija pripada bazi.
Mobile = brzina + sigurnost. Web = pregled + akcija.
Mobile flow: 3 tapa do svake stvari, offline-first, SOS uvek na dohvat. Web flow: pretraga, filteri, bulk akcije, keyboard-first.
Boje
Jedan akcent (Crta crveno), neutralna paleta sa toplim podtonom, i jasno razdvojen status sistema od statusa posmatrača — to su dve različite osovine i ne smeju se mešati.
Crta crveno — primarni akcent
Ink — neutralna paleta (warm)
Semantika sistema
Stanja sistema: poruke, validacija, banneri. Boja danger deli ton sa brand crvenom — to je opasno mesto u UI, ne ukras.
- Token
- --success
- Upotreba
- Potvrde, ok stanja
- Token
- --warning
- Upotreba
- Mek upit, eskalacija
- Token
- --danger
- Upotreba
- Destruktivno, blokade
- Token
- --info
- Upotreba
- Hint, kontekst
Status posmatrača — zelena · crvena · crna
Eksplicitno iz brief-a. Ovo je drugačiji pojam od semantike — opisuje stanje posmatrača na terenu, ne stanje UI elementa.
🟢 OK
Posmatrač javio se na vreme, sve forme uredu, signal pristiže.
🔴 Problem
Kasni izveštaj, prijavljen incident, nelogičan unos. Treba pozvati.
⚫ U opasnosti
SOS aktivan, gubitak signala u suspektnom kontekstu, fizička pretnja.
○ Neaktivan
Smena još nije počela, ili je posmatrač predao smenu kolegi.
Zastavice biračkih mesta
BM se „farba“ na osnovu nataloženih signala iz dana. Skala od čistog ka crvenom.
bez nalaza
prati
eskaluje
vruća tačka
Tipografija
Geist kao primarni sans (podržava srpsku latinicu — č, ć, đ, š, ž, kao i ćirilicu kroz proširenje), Geist Mono za podatke, ID-jeve i mala UI eta. Bez serifa, bez display fonta — sistem mora da deluje smireno čak i kada se 10 000 incidenata sliva u inbox.
Razmaci i mreža
4pt baza. Ne smemo da izlazimo iz skale — ako se nešto „ne uklapa“, sklapanje je problem, ne skala.
Skala razmaka
12-kolonski grid za web
Radius i elevacija
Mali radius za UI elemente (4–8px), srednji za kartice (10–12px), veliki samo za modale i sheet-ove (14–16px). Senke su suptilne — sistem prima informaciju, ne nudi spektakl.
Radius
Elevacija
Ikonografija
Tanak stroke (1.5px), uglovi 2px. Veličine: 14 (sm), 16 (md, default u UI), 20 (lg), 24 (xl, samo za empty state ili velike akcije). Boja preuzima boju teksta — ne sopstvene boje.
Dugmad
Četiri semantičke vrste: primary (ink, ne crvena — crvena je rezervisana za destruktivno i brand akcent), secondary (bela, bordered), ghost (transparent), danger (crvena, eksplicitno opasna). Tri veličine: sm (28), md (36), lg (44).
Pet ikonastih dugmadi po row-u u 4–5 boja bez semantike: žuto/tirkizno/plavo/zeleno/crveno. Korisnik mora da uči boju → akciju za svaki novi ekran. Submit dugme sitno levo dno.
Semantika: ink (primary), bela (secondary), prazna (ghost), crvena (samo destruktivno). Akcije skupljene u sticky bar dno desno. Boja kaže šta će se desiti.
Forme i unosi
Vertikalni layout (label iznad polja, ne pored), inline validacija, hint ispod, soft warnings sa eskalacijom umesto blokada. Submit ide u sticky bar — nikad mali plavi dugme dole-levo.
region:Beograd AND status:OKBedževi i pillovi
Mali, mirni, semantički. Tekst + opciono dot ili ikona, ali nikad oboje + 5 reči — bedž je akcenat, ne natpis.
Role chips — rešenje za 30 checkbox-ova
Rola posmatrača je tip + opciono regija. Sistemska prava su zasebni pojam. Dve odvojene osovine, traženo pretragom, prikazano chipovima, dodato klikom. Nikad više flat lista od 30 checkbox-ova bez objašnjenja.
30 checkbox-ova u jednom redu: STO, STO IN, STO OUT, STO BG, STO BG-IN, STO In Za, Analytics, Analytics Limited, Network coordinator… Sve izmešano. Nema search-a, nema objašnjenja, nema validacije. Plus „Parents/Children“ legacy sistem dole.
Tip posmatrača i sistemska rola su odvojeni. Tip ima atribute (smena, regija, akreditacija). Rola je permission bundle sa imenom. Chip = tip ili rola, sa kategorijom u boji, sa X za skidanje.
Tipovi posmatrača
Sistemske role
Tabele
Pretraga gore, filteri kao chipovi, akcije sakrivene dok ne hover-uje row (zatim klavijaturom dostupne ⌘E / ⌘D). Bez paginacije — virtual scroll. Bez „Filters“ dugmeta sa strane — sve u jednoj traci.
| Ime | Tip | BM | Status | Akreditacija | Obuka | Koordinator | Akcije | |
|---|---|---|---|---|---|---|---|---|
JĐJovana Đurović |
STOBM unutra | 0341/A · Novi Beograd | OK · javila 14:32 | CRTA + GNS | 8 / 8 | M. Stojanović |
|
|
NKNikola Kovačević |
MOBregion BG | — mobilni tim | Kasni 24 min | CRTA | 6 / 8 | A. Petrović |
|
|
MRMilica Radović |
STOBM ispred | 0177/B · Vračar | SOS · 14:48 | CRTA + GNS | 8 / 8 | M. Stojanović |
|
|
DPDragan Petrović |
LTOkampanja | — terenski | Smena 22:00 | CRTA | 8 / 8 | J. Mihailović |
|
|
SISara Ivanović |
STOBM unutra | 0298/A · Zemun | OK · javila 14:30 | samo CRTA | 8 / 8 | B. Janković |
|
Inbox — rešenje za 21-kolonski Reports
Voja je rekao eksplicitno: skinuti tabelu sa kraticama, postaviti inbox prikaz. Pošiljalac, predmet, kratak preview, vreme, prioritet i toggle Approved/Pending. Analitičar vidi samo svoja BM. Filter po regionu vraća tuđa BM kad treba uskakanje.
Kartice
Tri tipa kartice koje pokrivaju 80% potreba: BM kartica (preview u mapama i listama), kartica incidenta (u inbox-u i feed-u), kartica posmatrača (u rasporedu i pretrazi).
Kartica biračkog mesta
OŠ „Vladislav Ribnikar“
Knez Mihailova 12, Novi Beograd
Gimnazija „Sveti Sava“
Resavska 58, Vračar
Dom kulture Zemun
Gospodarska 18, Zemun
Kartica incidenta
Pretnja od člana komisije — fizičko sprečavanje rada
Član biračkog odbora me je zamolio da napustim prostoriju. Imam snimak na telefonu.
Kabine za glasanje nisu zatvorene od strane
Dve od tri kabine imaju problem sa zavesom — ne pokriva u potpunosti.
Posmatrač drugi nije došao na smenu 14:00
CC pozvao kolegu — javio se, kasni 30min zbog saobraćaja. Sara ostaje sama do 14:35.
Kartica posmatrača
Upozorenja i banneri
Četiri vrste: info, success, warn, danger. Uvek u istom layout-u (ikona — telo — close). Telo: nazov problema + jedna rečenica šta dalje. Bez wall of text-a.
Možeš da menjaš broj smena i tipove posmatrača sve do 72h pre izbornog dana.
27 od 27 stavki se poklapaju. Zapisnik je spreman za slanje.
Možeš poslati izveštaj sa ovim podatkom, ali sistem će ga eskalirati ka PCC za proveru.
Lokacija deli se uživo. CC operater B. Janković preuzima poziv za 12 sekundi.
Modal
Tri zone: naslov + opis, telo, akcije (uvek desno, primary poslednji). Bez ikone u naslovu. Zatvaranje preko Esc i klika van — bez X dugmeta osim kod toast-a.
Eskaluj incident kao teški?
Ovo će automatski pozvati PCC operatera i pokrenuti „crveni telefon“ tok ka Milici Radović.
Toast
Donji desni ugao web-a, vrh telefona. Auto-dismiss 5s za uspeh, 10s za upozorenje, sticky za danger dok korisnik ne reaguje.
14:00 izveštaj zaveden. Sledeći u 16:00.
Poziv stiže za 12 sekundi.
M. Stojanović: „Javi kad budeš slobodna.“
Map markeri
Markeri na mapi izbornog dana. Boja = status posmatrača. Broj unutar = redni broj BM. Veličina ne varira sa zoom-om — uvek 36px da bi se klik dao prst-om i na mobilnom.
Stanja — empty · loading · error
Prazan ekran nije bag, prazna lista nije bag. Svaki ekran ima planirana sva četiri stanja: empty, loading (skeleton), error, success. Trenutni „Ulogovani ste!“ je upravo ono što ne radimo.
Inbox je prazan
Nema pending izveštaja u tvojim BM-ovima. Možda je još rano — pogledaj mapu.
Nema veze sa serverom
Tvoji izveštaji se čuvaju lokalno i šalju automatski čim se konekcija vrati.
Pravilo: empty state uvek nudi jednu akciju (otvori mapu, pretraži…). Skeleton kopira oblik onoga što stiže — ne generičan spinner. Error stanje govori šta korisnik može da uradi, ne samo „greška 503“.